<template>
	<!-- 配置 -->
	<div class="setTab">
		<p>设置面板</p>
		<el-tabs v-model="currTab" type="card" class="demo-tabs" @tab-click="TabChange">
			<el-tab-pane label="画质" name="tabQuality">
				<el-checkbox-group v-model="qualityArr">
					<el-checkbox label="0">低画质 </el-checkbox>
					<el-checkbox label="2">中画质 </el-checkbox>
					<el-checkbox label="4">高画质 </el-checkbox>
				</el-checkbox-group>
			</el-tab-pane>
			<el-tab-pane label="设置" name="tabLab">
				<!-- <el-checkbox-group v-model="labArr">
					<el-checkbox label="">楼宇标签</el-checkbox>
					<el-checkbox label="23" @change="onLabSet">房间标签</el-checkbox>
					<el-checkbox label="">自定义标签</el-checkbox>
				</el-checkbox-group> -->
				<!-- <div>
					<div class="settingMb-box-title">账号：jxyy</div>
					<div class="settingMb-box-btn pbtn" @click="routerToMh">
						<p>返回门户</p>
					</div>
					<div class="settingMb-box-btn pbtn" @click="editLogin">
						<p>退出登录</p>
					</div>
				</div> -->
			</el-tab-pane>
			<el-tab-pane label="其他" name="tabOther">
				<el-button class="getPos" @click="hCallModuleScene('GetCurentBuildPos', '', 'OnCurrPos')">
					设置为登录视角
				</el-button>
				<!-- <el-checkbox-group v-model="otherArr">
					<el-checkbox label="指北针" value="1" />
					<el-checkbox label="随机人物" value="2" />
					<el-checkbox label="通行动画开关" value="4" />
				</el-checkbox-group>
				<el-row>
					<el-col :span="12">设置透视颜色</el-col>
					<el-col :span="12"><el-color-picker> </el-color-picker></el-col>
				</el-row>
				<el-button>
					设置为登录视角
				</el-button> -->
			</el-tab-pane>
		</el-tabs>
	</div>

</template>

<script setup>
import {
	nextTick,
	onMounted,
	onUnmounted,
	ref,
	watch,
} from "vue";
import router from '@/router'
//标签设置
const onLabSet = (e, a) => {
	let d = {
		typeId: a.target.value,
		modelType: -1,
		enable: e + ""
	};
	hCallModuleScene("SetVisibleByType", d);
	//console.log(e, a);
}

const editLogin = () => {
	// isDoneScene.value = false
	router.push('/login')
	localStorage.clear()
},
	routerToMh = () => {
		router.push('/gateway')
	}
const qualityArr = ref([]), //画质0:低画质，1:流畅，2标清，3高清，4极致
	labArr = ref(['23']), //标签
	otherArr = ref([]); //其它
watch(qualityArr, (v, prev) => {
	if (v.length == 0) {
		qualityArr.value = [prev[0]];
		return;
	}
	if (v.length > 1) {
		v.shift();
	}
	hCallModuleScene("SetQuality", v[0]);
	console.log(prev, v);
});

//设置面板
const currTab = ref("tabQuality"),
	TabChange = (t) => {
		//	console.log(t);
	}

const hEmits = defineEmits(["call"]);
const hCall = (h, d, b) => {
	hEmits("call", h, d, b);
};
//模板化调用，场景模块
const hCallModuleScene = (h, d, b) => {
	hCall("CallScene", {
		h: h,
		dat: d
	}, b);
}

// defineExpose({ 
// 	evScene, 
// });
onUnmounted(() => { });

onMounted(() => {
	nextTick(() => { });
});
</script>

<style scoped lang="scss">
:deep(.el-tabs__nav-prev),
:deep(.el-tabs__nav-next) {
	line-height: 30px;
}

.setTab {
	position: absolute;
	width: 300px;
	height: 300px;
	background-color: #eee;
	bottom: 100px;
	border-radius: 20px;
	overflow: hidden;
	color: #222;
	text-align: center;
	padding: 0 10px 10px;
	border: 4px solid #8597B1;

	>p {
		line-height: 40px;
		font-size: 16px;
	}

	:deep(.el-tabs) {
		height: calc(100% - 40px);
	}

	:deep(.el-tabs__header) {
		border: 0;
		z-index: 1;
		border-radius: 10px 10px 0 0;
		width: calc(100% - 20px);
		margin: 0 10px;
		margin-bottom: 0 !important;
		box-shadow: 0 0 2px 0 #444;
		height: 35px;
	}

	:deep(.el-tabs__item) {
		border: 0 !important;
		line-height: 30px !important;
	}

	:deep(.el-tabs__item.is-top.is-active) {
		color: #eee;
		background-color: #219AF5;
		filter: drop-shadow(0px 0px 1px black);
	}

	:deep(.el-tabs__item.is-top):first-child {

		border-radius: 10px 0 0 0;
	}

	:deep(.el-tabs__item.is-top):last-child {
		border-radius: 0 10px 0 0;
	}

	:deep(.el-tabs--card>.el-tabs__header .el-tabs__nav) {
		border: 0;
	}

	:deep(.el-tab-pane) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}

	:deep(.el-tabs__content) {
		z-index: 2;
		height: calc(100% - 50px);
		// box-shadow: 0 0 3px 0 #444;
		border-radius: 10px;
		background-color: #b1c9eb;
		padding: 10px 20px;

		filter: drop-shadow(0px 0px 1px black);
	}

	:deep(.el-checkbox-group) {
		display: flex;
		flex-direction: column;
	}
}

.settingMb-box-title {
	font-family: FZCuYuan-M03S;
	font-weight: 400;
	font-size: 18px;
	color: #6d7d8c;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
}

.settingMb-box-btn {
	width: 137px;
	height: 31px;
	background: linear-gradient(180deg, rgba(192, 208, 220, 0.58), rgba(255, 255, 255, 0.58));
	border-radius: 8px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px auto;

	p {
		font-family: FZCuYuan-M03S;
		font-weight: 400;
		font-size: 15px;
		color: #636363;
	}
}
</style>